<template>
  <div class="project-panel">
    <div class="project-panel-left">
      <el-scrollbar>
        <div class="panel-title">
          <img :src="TitleIcon" />
          <span>项目建设</span>
        </div>

        <div
          class="chart-wrapper flex-y"
          style="padding-top: 0"
        >
          <div class="project-sum">
            <div class="project-sum-title">
              <div>项目总数</div>
              <div>
                <span class="project-sum-num">{{
                  governmentProjectsNumber +
                  enterpriseProjectsNumber
                }}</span
                >个
              </div>
            </div>
            <div class="pie-marker">
              <div class="project-sum-pie">
                <chart
                  chart-id="project-type-1-sum"
                  :chart-height="120"
                  chart-width="100%"
                  :options="chart1_1_Options"
                />
              </div>
              <div class="project-sum-marker"></div>
            </div>

            <div>
              <div class="project-sum-content">
                <div
                  class="project-sum-content-zfxmline"
                ></div>
                <div>政府项目</div>
                <div class="project-sum-content-num">
                  {{ governmentProjectsNumber }}个
                </div>
              </div>
              <div class="project-sum-content">
                <div
                  class="project-sum-content-qyxmline"
                ></div>
                <div>企业项目</div>
                <div class="project-sum-content-num">
                  {{ enterpriseProjectsNumber }}个
                </div>
              </div>
            </div>
          </div>
          <div class="project-sum">
            <div class="project-sum-title">
              <div>项目总投资</div>
              <div>
                <span class="project-sum-num">{{
                  governmentInvestment +
                  enterpriseInvestment
                }}</span
                >亿元
              </div>
            </div>
            <div class="pie-marker">
              <div class="project-sum-pie">
                <chart
                  chart-id="project-type-1-invest"
                  :chart-height="120"
                  chart-width="100%"
                  :options="chart1_2_Options"
                />
              </div>
              <div class="project-sum-marker1"></div>
            </div>
            <div>
              <div class="project-sum-content">
                <div
                  class="project-sum-content-zftzline"
                ></div>
                <div>政府投资</div>
                <div class="project-sum-content-num">
                  {{ governmentInvestment }}亿元
                </div>
              </div>
              <div class="project-sum-content">
                <div
                  class="project-sum-content-qytzline"
                ></div>
                <div>企业投资</div>
                <div class="project-sum-content-num">
                  {{ enterpriseInvestment }}亿元
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chart-wrapper flex-y">
          <div
            class="chart-wrapper-content flex-x cross-center"
            style="margin-top: -12px"
          >
            <chart
              chart-id="project-type-1-chart1"
              :chart-height="150"
              chart-width="50% !important'"
              :options="chart2_1_Options"
            />
            <div class="flex-y cross-start flex-1">
              <div
                class="legend flex-x cross-center"
                v-for="(item, index) in typeTotalListFixed"
                :key="index"
              >
                <div
                  class="legend-round-icon"
                  :class="item.color"
                ></div>
                <span class="legend-title">{{
                  item.type
                }}</span>
                <span class="legend-value"
                  >{{ item.count }} 亿元</span
                >
              </div>
            </div>
          </div>
        </div>
        <img
          class="line-separator"
          :src="LineSeparator"
          alt="分割线"
        />
        <div class="bimNavType-title">
          <div
            @click="toolItemClickHandleType(item)"
            v-for="(item, index) in toolData1"
            :key="index"
            :class="{
              'is-active': activeTool1 === item.value
            }"
          >
            {{ item.label }}
            <p class="line"></p>
          </div>
        </div>
        <!-- 按项目状态 -->
        <div class="chart-wrapper flex-y">
          <div class="title flex-x cross-center">
            <img
              class="title-prefix"
              :src="TitlePrefix"
              alt="标题前缀"
            />
            <span>按项目状态</span>
          </div>
          <span class="chart-title">
            <div class="chart-legend-purple"></div>
            总投资
            <div class="chart-legend-green"></div>
            项目数
          </span>
          <chart
            chart-id="project-type-1-status"
            :chart-height="250"
            chart-width="100%"
            :options="byStatusOptions"
          />
        </div>
        <img
          class="line-separator"
          :src="LineSeparator"
          alt="分割线"
        />
        <!-- 按项目类型 -->
        <div class="chart-wrapper flex-y">
          <div class="title flex-x cross-center">
            <img
              class="title-prefix"
              :src="TitlePrefix"
              alt="标题前缀"
            />
            <span>按项目类型</span>
          </div>
          <span class="chart-title">
            <div class="chart-legend-light-blue"></div>
            总投资
            <div class="chart-legend-orange"></div>
            项目数
          </span>
          <chart
            chart-id="project-type-1-type"
            :chart-height="250"
            chart-width="100%"
            :options="byTypeOptions"
          />
        </div>
        <img
          class="line-separator"
          :src="LineSeparator"
          alt="分割线"
        />
        <!-- 按项目区位 -->
        <div class="chart-wrapper flex-y">
          <div class="title flex-x cross-center">
            <img
              class="title-prefix"
              :src="TitlePrefix"
              alt="标题前缀"
            />
            <span>按项目区位</span>
          </div>
          <span class="chart-title">
            <div class="chart-legend-blue"></div>
            总投资
            <div class="chart-legend-yellow"></div>
            项目数
          </span>
          <chart
            chart-id="project-type-1-zone"
            :chart-height="250"
            chart-width="100%"
            :options="byZoneOptions"
          />
        </div>
      </el-scrollbar>
    </div>

    <div class="project-panel-right">
      <RightPanel />
    </div>
  </div>
</template>

<script>
import TitleIcon from '@/assets/img/logo.png'
import LineSeparator from '@/assets/img/line-separator.png'
import TitlePrefix from '@/assets/img/title-prefix.png'
import Chart from '@/components/chart/index'
import RightPanel from './RightPanel'
import { treeBySpecialType } from '@/api/tree'
import { retrieveDataServiceById } from '@/api/multiple-dataservice'
import axios from 'axios'
import New from '@/utils/new'

export default {
  name: 'ProjectPanel',
  components: {
    Chart,
    RightPanel
  },
  data() {
    return {
      TitleIcon,
      LineSeparator,
      TitlePrefix,
      governmentProjectsNumber: 75,
      enterpriseProjectsNumber: 70,
      enterpriseInvestment: 423,
      governmentInvestment: 401,
      chart1_1_Options: {
        tooltip: {
          trigger: 'item',
          formatter: (parms) => {
            const seriesName = parms.seriesName
            const value = parms.data.value.toFixed(2)
            const name = parms.data.name
            const marker = parms.marker
            return (
              seriesName +
              '<br>' +
              marker +
              name +
              ': ' +
              value +
              '亿元'
            )
          },
          confine: true
        },
        color: ['#FFB222', '#20F6C6'],
        series: [
          {
            name: '项目总数',
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 75, name: '政府项目' },
              { value: 70, name: '企业项目' }
            ]
          }
        ]
      },
      chart1_2_Options: {
        tooltip: {
          trigger: 'item',
          formatter: (parms) => {
            const seriesName = parms.seriesName
            const value = parms.data.value.toFixed(2)
            const name = parms.data.name
            const marker = parms.marker
            return (
              seriesName +
              '<br>' +
              marker +
              name +
              ': ' +
              value +
              '亿元'
            )
          },
          confine: true
        },
        color: ['#638BEE', '#04CAFE'],
        series: [
          {
            name: '项目总投资',
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 423, name: '政府投资' },
              { value: 401, name: '企业投资' }
            ]
          }
        ]
      },
      chart2_1_Options: {
        tooltip: {
          trigger: 'item',
          formatter: (parms) => {
            const seriesName = parms.seriesName
            const value = parms.data.value.toFixed(2)
            const name = parms.data.name
            const marker = parms.marker
            return (
              seriesName +
              '<br>' +
              marker +
              name +
              ': ' +
              value +
              '亿元'
            )
          },
          confine: true
        },
        color: ['#2663FF', '#FFB222', '#00d075'],
        series: [
          {
            name: '项目投资占比',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 4,
              length2: 4
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 301, name: '在建' },
              { value: 265, name: '待建' },
              { value: 258, name: '建成' }
            ]
          }
        ]
      },
      typeTotalListFixed: [
        {
          color: 'blue',
          type: '在建',
          count: 301
        },
        {
          color: 'orange',
          type: '待建',
          count: 265
        },
        {
          color: 'green',
          type: '建成',
          count: 258
        }
      ],
      toolData1: [
        {
          label: '政府投资',
          value: 'government'
        },
        {
          label: '企业投资',
          value: 'enterprise'
        }
      ],
      activeTool1: 'government',
      byStatusOptions: {},
      byTypeOptions: {},
      byZoneOptions: {}
    }
  },
  mounted() {
    this.getTotalData()
    this.initInvest()

    New.$on('getProjectInfo', (data) => {
      const projsctStatus = this.classify(
        data,
        'projectStatus'
      )
      const projectType = this.classify(data, 'projectType')
      const projectArea = this.classify(data, 'projectArea')

      const byStatus =
        this.calculationChartValue(projsctStatus)
      this.byStatusOptions = this.investDataFixed(
        byStatus.textArr,
        byStatus.valueArr,
        byStatus.lengthArr,
        ['#FFDDA2', '#0072CA'],
        '#20F6C6'
      )
      const byType = this.calculationChartValue(projectType)
      this.byTypeOptions = this.investDataFixed(
        byType.textArr,
        byType.valueArr,
        byType.lengthArr,
        ['#20F6C6', '#0072CA'],
        '#FFDDA2'
      )
      const byZone = this.calculationChartValue(projectArea)
      this.byZoneOptions = this.investDataFixed(
        byZone.textArr,
        byZone.valueArr,
        byZone.lengthArr,
        ['#00FFFF', '#0072CA'],
        '#FFFF41'
      )
    })
    New.$on('rightTabChange', (data) => {
      switch (data) {
        case 'government':
          this.activeTool1 = 'government'
          break
        case 'enterprise':
          this.activeTool1 = 'enterprise'
          break
        default:
          break
      }
    })
  },
  beforeDestroy() {
    New.$off('getProjectInfo')
    New.$off('rightTabChange')
  },
  methods: {
    getTotalData() {
      treeBySpecialType('shengzhangdongtai').then((res) => {
        const list = res.data[0].children
        const govInfo = list[0].resourceInfo
          ? list[0].resourceInfo[0]
          : null
        const enterInfo = list[1].resourceInfo
          ? list[1].resourceInfo[0]
          : null
        const govId = govInfo.pkid
        const entId = enterInfo.pkid
        const promiseList = []
        promiseList.push(
          retrieveDataServiceById({
            pageIndex: 1,
            pageSize: 999,
            serviceId: govId
          }),
          retrieveDataServiceById({
            pageIndex: 1,
            pageSize: 999,
            serviceId: entId
          })
        )
        Promise.all(promiseList).then((res) => {
          const queryList = []
          res.forEach((val) => {
            if (val.success) {
              if (val.data && val.data.length) {
                const url =
                  val.data[0].resourceServiceDataInfoList[0]
                    .serviceDataUrl
                const dataService = decodeURI(url)
                const dataServiceUrl =
                  dataService.substring(
                    0,
                    dataService.lastIndexOf('/datasources/')
                  ) +
                  '/featureResults.json?returnContent=true&toIndex=-1&hasGeometry=false'
                const dataSourceAndDataSet = dataService
                  .substring(
                    dataService.lastIndexOf(
                      '/datasources/'
                    ) + '/datasources/'.length
                  )
                  .split('/datasets/')
                  .map((item) => decodeURI(item))
                const sqlParameter = {
                  datasetNames: [
                    `${dataSourceAndDataSet.join(':')}`
                  ],
                  getFeatureMode: 'SQL',
                  queryParameter: {
                    attributeFilter: 'SmID > 0'
                  }
                }
                const queryData =
                  JSON.stringify(sqlParameter)
                queryList.push(
                  axios.post(dataServiceUrl, queryData)
                )
              }
            }
          })
          Promise.all(queryList).then((item) => {
            const allData = []
            item.forEach((list, index) => {
              if (list.data && list.data.features) {
                const dataList = []
                list.data.features.forEach((i) => {
                  let data = {}
                  const fieldValues = i.fieldValues
                  const fieldNames = i.fieldNames
                  const projectStatusIndex =
                    fieldNames.findIndex(
                      (item) => item === '项目状态'
                    )
                  const projectValueIndex =
                    fieldNames.findIndex(
                      (item) => item === '项目投资（万元）'
                    )
                  if (fieldValues[projectStatusIndex]) {
                    data = {
                      projectStatus:
                        fieldValues[projectStatusIndex],
                      projectValue:
                        fieldValues[projectValueIndex]
                    }
                    dataList.push(data)
                    if (
                      ['在建', '待建', '建成'].includes(
                        data.projectStatus
                      )
                    ) {
                      allData.push(data)
                    }
                  }
                })
                switch (index) {
                  case 0:
                    this.governmentProjectsNumber =
                      dataList.length
                    this.chart1_1_Options.series[0].data[0].value =
                      dataList.length
                    dataList.forEach((value) => {
                      this.governmentInvestment += Number(
                        value.projectValue
                      )
                    })
                    this.governmentInvestment = Math.round(
                      this.governmentInvestment / 10000
                    )
                    this.chart1_2_Options.series[0].data[0].value =
                      this.governmentInvestment
                    break
                  default:
                    this.enterpriseProjectsNumber =
                      dataList.length
                    this.chart1_1_Options.series[0].data[1].value =
                      dataList.length
                    dataList.forEach((value) => {
                      this.enterpriseInvestment += Number(
                        value.projectValue
                      )
                    })
                    this.enterpriseInvestment = Math.round(
                      this.enterpriseInvestment / 10000
                    )
                    this.chart1_2_Options.series[0].data[1].value =
                      this.enterpriseInvestment
                    break
                }
              }
            })
            const projsctStatus = this.classify(
              allData,
              'projectStatus'
            )
            const byStatus =
              this.calculationChartValue(projsctStatus)
            this.typeTotalListFixed.forEach((typeList) => {
              const index = byStatus.textArr.findIndex(
                (text) => text === typeList.type
              )
              typeList.count = Math.round(
                byStatus.valueArr[index]
              )
            })
            this.chart2_1_Options.series[0].data.forEach(
              (option) => {
                const index = byStatus.textArr.findIndex(
                  (text) => text === option.name
                )
                option.value = byStatus.valueArr[index]
              }
            )
          })
        })
      })
    },
    calculationChartValue(arr) {
      const tempObj = {
        textArr: [],
        valueArr: [],
        lengthArr: []
      }
      arr.forEach((item) => {
        let sum = 0
        tempObj.textArr.push(item.fieldName)
        item.data.forEach((val) => {
          sum += Number(val.projectValue)
        })
        tempObj.valueArr.push(sum / 10000)
        tempObj.lengthArr.push(item.data.length)
      })
      return tempObj
    },
    classify(arr, fieldName) {
      const map = {}
      const myArr = []
      for (let i = 0; i < arr.length; i++) {
        if (!map[arr[i][fieldName]]) {
          myArr.push({
            fieldName: arr[i][fieldName],
            data: [arr[i]]
          })
          map[arr[i][fieldName]] = arr[i]
        } else {
          for (let j = 0; j < myArr.length; j++) {
            if (arr[i][fieldName] === myArr[j].fieldName) {
              myArr[j].data.push(arr[i])
              break
            }
          }
        }
      }
      return myArr
    },
    initInvest() {
      this.byStatusOptions = this.investDataFixed(
        ['在建', '待建', '建成'],
        [8, 23, 21],
        [2, 8, 16],
        ['#FFDDA2', '#0072CA'],
        '#20F6C6'
      )
      this.byTypeOptions = this.investDataFixed(
        ['基础设施', '公服配音', '生态景观', '其他'],
        [8, 16, 23, 11],
        [3, 6, 10, 5],
        ['#20F6C6', '#0072CA'],
        '#FFDDA2'
      )
      this.byZoneOptions = this.investDataFixed(
        [
          '成渝国际科教城',
          '中国西部智造示范区',
          '应用性科学中心'
        ],
        [8, 23, 9],
        [5, 12, 4],
        ['#00FFFF', '#0072CA'],
        '#FFFF41'
      )
    },
    investDataFixed(
      type,
      invest,
      item,
      barColor,
      lineColor
    ) {
      const option = {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        grid: {
          top: '30',
          bottom: '40'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          // axisTick: {
          //   alignWithLabel: true
          // },
          data: type,
          axisLabel: {
            fontSize: 12,
            color: '#d2e6f0',
            interval: 0,
            formatter: (value) => {
              const rowMax = 5
              let overValue = ''
              for (let i = 0; i < value.length; i++) {
                if (i % rowMax === 0 && i !== 0) {
                  overValue += '\n'
                  overValue += value[i]
                } else {
                  overValue += value[i]
                }
              }
              return overValue
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            position: 'left',
            alignTicks: true,
            nameTextStyle: {
              color: 'white'
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: 'white'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          {
            type: 'value',
            name: '个',
            nameTextStyle: {
              color: 'white'
            },
            position: 'right',
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#d2e6f0'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '亿元',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: barColor[0] // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: barColor[1] // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            data: invest
          },
          {
            name: '个',
            type: 'line',
            itemStyle: {
              normal: {
                color: lineColor,
                lineStyle: {
                  color: lineColor
                }
              }
            },
            yAxisIndex: 1,
            data: item
          }
        ]
      }
      return option
    },
    toolItemClickHandleType(data) {
      const { value } = data
      this.activeTool1 =
        this.activeTool1 === value ? undefined : value
      if (this.activeTool1) {
        New.$emit('leftTabChange', this.activeTool1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.project-panel {
  display: flex;

  &-left {
    width: 500px;
    height: 100%;
    background-color: rgba(7, 13, 35, 0.5);
    padding: 20px 0 20px 20px;

    ::v-deep {
      .el-scrollbar {
        height: 100%;

        &__wrap {
          overflow-x: hidden;
        }

        &__view {
          padding-right: 8px;
        }
      }
    }

    .panel-title {
      margin-bottom: 20px;
      display: flex;
      align-items: center;

      img {
        width: 34px;
        height: 34px;
      }

      span {
        margin-left: 20px;
        font-size: 24px;
        color: white;
        font-weight: 800;
      }
    }

    .line-separator {
      width: 100%;
      object-fit: cover;
      padding-right: 8px;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .chart-wrapper {
      padding: 5px 10px 0 0;

      &:last-of-type {
        padding-bottom: 0;
      }

      &-content {
        margin-top: 0;

        .chart {
          width: 50% !important;
        }
      }

      .chart-legend-blue {
        width: 12px;
        height: 12px;
        display: inline-block;
        background: linear-gradient(0deg, #00ffff, #0072ca);
      }

      .chart-legend-yellow {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #ffff41;
      }

      .chart-legend-purple {
        width: 12px;
        height: 12px;
        display: inline-block;
        background: linear-gradient(0deg, #ffdda2, #0072ca);
      }

      .chart-legend-green {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #20f6c6;
      }

      .chart-legend-light-blue {
        width: 12px;
        height: 12px;
        display: inline-block;
        background: linear-gradient(0deg, #20f6c6, #0072ca);
      }

      .chart-legend-orange {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #ffdda2;
      }

      .progress-num {
        margin-top: 5px;
        margin-bottom: 5px;
      }

      .project-investment {
        display: flex;
        justify-content: space-between;
      }

      .progress-chart {
        margin-bottom: 5px;
        width: 100%;
        height: 32px;
        background: rgba(0, 186, 255, 0.1);
      }

      .project-num {
        width: 100%;
        height: 80px;
        background: linear-gradient(
          150deg,
          #0b566f33,
          #1b3f5633
        );
        border: 1px solid #86cfed33;
        border-radius: 6px;
        margin-left: 7px;
        margin-top: 5px;
        padding-right: 14px;
        display: flex;
        justify-content: space-between;

        .project-img {
          display: flex;

          img {
            width: 71px;
            height: 59px;
          }
        }

        &-title {
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          font-weight: bold;
          color: #ffffff;
        }

        &-all {
          height: 40px;
          margin-left: 12px;
          line-height: 40px;
          font-size: 30px;
          font-weight: 800;
          color: #ffffff;
        }
      }

      .legend {
        &:not(:last-of-type) {
          margin-bottom: 13px;
        }

        &-round-icon {
          width: 7px;
          height: 7px;
          margin-right: 3px;
          margin-left: 5px;
          border-radius: 50%;

          &.blue {
            background-color: #696dff;
          }

          &.light-blue {
            background-color: #00ffff;
          }

          &.green {
            background-color: #00d075;
          }

          &.orange {
            background-color: #ffa862;
          }

          &.yellow {
            background-color: #ffdda2;
          }
        }

        &-title {
          font-size: 14px;
          font-weight: 400;
          color: white;
          margin-right: 6px;
        }

        &-value {
          font-size: 14px;
          font-weight: bold;
          color: white;
          margin-left: 30px;
        }
      }

      .chart-title {
        font-size: 14px;
        font-weight: 400;
        color: #d2e6f0;
        align-self: flex-end;
        margin-top: 4px;
      }
    }

    .title {
      &-prefix {
        position: relative;
        top: 2px;
        width: 6px;
        height: 16px;
        margin-right: 5px;
        object-fit: fill;
      }

      span {
        font-size: 18px;
        font-weight: 800;
        line-height: 18px;
        background: linear-gradient(
          180deg,
          white 0%,
          #a4bbdd 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .project-sum {
      width: 100%;
      //margin: 10px 0 20px -5px;
      margin: 10px 0 20px 0;
      display: flex;
      justify-content: center;

      &-title {
        font-size: 16px;
        width: 100px;
        margin: 0 30px;
      }

      &-num {
        font-size: 16px;
        color: #ffff41;
        margin-right: 5px;
      }

      &-pie {
        margin: -40px 0px 0px -25px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
      }

      .base-marker {
        width: 40px;
        height: 40px;
        margin-left: 6px;
        position: absolute;
      }

      &-marker {
        @extend .base-marker;
        background: url('~@/assets/img/zttj-sum.png')
          no-repeat;
        background-size: 100% 100%;
      }

      &-marker1 {
        @extend .base-marker;
        background: url('~@/assets/img/zttj-invest.png')
          no-repeat;
        background-size: 100% 100%;
      }

      &-content {
        width: 140px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 16px;

        .base-line {
          width: 8px;
          height: 3px;
          margin-right: 10px;
        }

        &-zfxmline {
          @extend .base-line;
          background: #ffb222;
        }

        &-qyxmline {
          @extend .base-line;
          background: #20f6c6;
        }

        &-zftzline {
          @extend .base-line;
          background: #638bee;
        }

        &-qytzline {
          @extend .base-line;
          background: #04cafe;
        }

        &-num {
          font-size: 12px;
          margin-left: 10px;
        }
      }
    }

    .bimNavType {
      &-title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 33px;
        line-height: 33px;
        font-weight: 800;
        color: #ffffff;
        font-family: PingFang SC;
        margin-bottom: 10px;

        > div {
          position: relative;
          //margin-right: 10px;
          /*padding-bottom: 10px;*/
          cursor: pointer;
          font-size: 16px;
          color: white;
          // text-shadow: 0px 2px 2px #0C141D;
          //background: linear-gradient(
          //  180deg,
          //  #ffffff 0%,
          //  #a4bbdd 100%
          //);
          //-webkit-background-clip: text;
          //-webkit-text-fill-color: transparent;

          &:first-child {
            margin-right: 30px;
          }
        }

        .is-active {
          //text-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
          //background: linear-gradient(
          //  180deg,
          //  #00cefb 0%,
          //  #65faff 100%
          //);
          color: rgba(26, 217, 255, 1);
          //-webkit-background-clip: text;
          //-webkit-text-fill-color: transparent;

          &::after {
            content: '';
            position: absolute;
            left: 25%;
            bottom: 0;
            width: 50%;
            height: 2px;
            background: rgba(26, 217, 255, 1);
          }
        }
      }
    }

    .pie-marker {
      position: relative;
      //margin-left: -70px;
      margin-right: 60px;
    }
  }

  &-right {
    width: 500px;
    height: 100%;
    margin-left: 20px;
  }
}
</style>
